добавить блоки

селекты

яндекс карты v3



пагинация доработать сл предыдущая стр + сделать еще 1 с доп показать еще
не стандартное обтекание текстом - добавить чтобы фотка была по центру
Аккордеон с Г-образным заголовком - сделать через грид а не через абсолют и фото исправить пути
видно что нет бордера у таб + аккордеон изза плавности
добавить базовый г сап примеры



добавить табы со вкладкой все + показать еще 2 в 1 и еще сделать тож самое но без вкладки все



isolation: isolate; /* Создаёт новый контекст, но не ломает z-index */ - потестить и написать куда-нибудь


Избегаем "дерганья" при font-weight: bold на hover
css
.link {
    display: inline-block;
    font-weight: 400;
}
.link:hover {
    font-weight: 700;
} потестить



стилизация атрибута [alt]


печатный текст на js
сброс стилей для select

бутстрап ресет



дроп меню - добавить стрелки у пунктов меню
дроп меню - возможно добавить сложное многоуровневое меню




swiper слайдер дошел до буквы s вкладка параметры
добавить параметры эффектов на s, slide





slick slider
owl-carousel
динамик шрифты
Скелетоны (Skeletons) вместо спиннеров при загрузке





input type=range
input type=range - диапозон цен




прогресс бар
спиннер
табы написать еще допом через делегирование
в карточку товаров добавить лейблы новый нет в наличии топ продаж
autopart - карточку со звездным рейтингом и рейтинг на js
карточка товара добавить крестик закрытия в html + js
grinding - air Datapiker
примафунгин слайдер/карточка через svg
sport-bettings - сотрировка таблицы
femidel - грид подвал, табы на пк по контуру на мобилке слайдер с кастомным фиксом стрелки навигации, свайпер онли мобайл там другой код его надо забрать тоже! Добавить луп для слайдера с точками
подвал добавить с фемиделя/криспанорма - выбрать
из геймификации добавить скрипт просмотра прогресса
метрона взять формат цены скрипт и клип пас в компоненте help


геом фигуры на css -  https://html5book.ru/css-figury/
готово 1 - 16, 18 - 20, 22, 27 - ненадо, 33, 37 / 43


Табы с трансформацией в слайдер на мобильных устройствах (табы становятся пагинацией слайдера) + тут еще карточки становятся слайдером




Восьмиугольник - исправить
его код
#octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}

#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}



scroll-behavior стили в шапке для меню



<!-- 3. Через <use> (если SVG с id) -->
<svg width="32" height="32">
  <use href="svg/solid/home.svg#icon"></use>
</svg>




потестить функцию clamp






_scroll-behavior.html - доработать проверки на существование элементов и чтоб не внешняя ссылка была


новый миксин добавить

// 👈 родитель   👈 внутри есть элемент с ховером
.container:has(.element:hover) {
  /* стили для родителя */
}
Итог
has() — это имба. Юзай везде, где поддерживается браузерами. 👍

можно наверное миксин сделать аля @mixin(parent, child, action){.parent:&has(.child:action)}
Такой миксин реально упростит жизнь.

Миксин
scss
@mixin has($parent, $child, $action: hover) {
  #{$parent}:has(#{$child}:#{$action}) {
    @content;
  }
}
Использование
scss
// Навели на заголовок → меняем карточку
@include has('.card', '.card-title', hover) {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

// Навели на кнопку → меняем форму
@include has('.form-group', '.btn', hover) {
  border-color: blue;
}

// Навели на ссылку → меняем карточку
@include has('.card', 'a', hover) {
  background: #f0f0f0;
}

// Навели на инпут → меняем контейнер
@include has('.field-group', 'input', focus) {
  box-shadow: 0 0 10px rgba(0,0,255,0.3);
}
Ещё вариант — с параметрами по умолчанию
scss
@mixin parent-has($child, $action: hover) {
  &:has(#{$child}:#{$action}) {
    @content;
  }
}
scss
.card {
  @include parent-has('.card-title', hover) {
    transform: scale(1.03);
  }
}
Или с вложенностью
scss
@mixin when-has($child, $action: hover) {
  &:has(#{$child}:#{$action}) {
    @content;
  }
}
scss
.card {
  @include when-has('.btn', hover) {
    transform: scale(1.05);

    .card-title {
      color: red;
    }
  }
}


плавная прокрутка добавить в скрипт вместо старого
const anchors = document.querySelectorAll('a[href*="#"]')
	for (let anchor of anchors) {
		anchor.addEventListener('click', function (e) {
			e.preventDefault()

			const blockID = anchor.getAttribute('href').substr(1)

			if (blockID === '' || blockID === '#') {
				document.body.scrollIntoView({
					behavior: 'smooth',
					block: 'start'
				})
			}

			else {
				const target = document.getElementById(blockID)

				if (target) {
					target.scrollIntoView({
					behavior: 'smooth',
					block: 'start'
					})
				}
			}

			if (headerMenuMobile.classList.contains('header__active')) {
				document.body.style.overflow = ''
				headerMenuMobile.classList.remove('header__active')
				burgerLine[0].classList.remove('burger__line-minus45deg')
				burgerLine[2].classList.remove('burger__line_45deg')
				burgerLine[1].classList.remove('burger__line-dnone')
  			}
	})
}


scrollbar-gutter: stable; - компенсация скроллбара для модалки - потестить



кастомные радиоконопки добавить еще какие нибудь
кастомные чекбоксы добавить еще какие нибудь
кастомный input type file добавить еще какие нибудь
кнопки добавить еще какие нибудь
кнопки с иконкой корзины добавить еще какие нибудь
карточки товаров добавить еще какие нибудь




сайт 77.95.206.106 / frontend-technology.ru